<template>
  <div class="g-user-info">
    <Images :src="user?.avatar" @customClick="skipUserInfo" class="avatar" />
    <div class="user-info__desc">
      <div class="g-user-name">
        <span v-text="user?.userName"></span>
        <!-- 性别 -->
        <Icon use="user-s" v-if="user?.sex === 1" size="1.4em" color="#859fd3" />
        <Icon use="female" v-else-if="user?.sex === 0" size="1em" color="red" />
      </div>
      <span>
        微信号: {{ user?.weixinNumber }}
      </span>
      <span>
        地区: {{ user?.district }}
      </span>
    </div>
  </div>
</template>

<script setup>
import Images from '@/components/Images/index.vue'
import Icon from '@/components/SVG/index.vue';
const { user } = defineProps({
  user: {
    type: Object,
    default: {},
  }
})
function skipUserInfo (e) {

}
</script>

<style lang="scss" scoped>
.g-user-info {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 20px;

  .avatar {
    width: 50px;
    height: 50px;
  }
}

.user-info__desc {
  text-align: left;
  display: flex;
  flex-direction: column;
  color: #aaa;
}

.g-user-name {
  display: flex;
  align-items: center;
  gap: 4px;
  color: black;
  font-size: 16px;
}
</style>